<template>
  <view>
    <view :style="{ width: '100%', overflow: 'hidden', height: isRescue ? '50vh' : 'calc(100vh - 370rpx)' }">
      <map :scale="scale" id="myMap" show-scale @tap.stop="clickMap" @markertap="markertap" @callouttap="callouttap(e)"
        :style="{ width: '100%', height: isRescue ? 'calc(50vh + 40rpx)' : 'calc(100vh - 330rpx)' }" :latitude="latitude"
        :longitude="longitude" :markers="allMarkers">
        <cover-view slot="callout" @click="toShop">
          <block :key="v.id" v-for="   v    in    markers   ">
            <cover-view class="customCallout" :marker-id="v.id">
              <cover-view class="content">
                <cover-view class="box-img">
                  <cover-image class="img" :src="v.company_img"></cover-image>
                </cover-view>
                <cover-view class="to-title">
                  <cover-view class="p title">{{ v.title }}</cover-view>
                  <cover-view class="p">地址：{{ v.address }}</cover-view>
                </cover-view>
                <cover-view class="to-shop">
                  <cover-view class="to-shop__img">
                    <cover-image mode="aspectFill" src="../../../static/icon_nav/stroe.png"></cover-image>
                  </cover-view>
                  <cover-view>导航到店</cover-view>
                </cover-view>
              </cover-view>
            </cover-view>
          </block>
        </cover-view>
      </map>
    </view>
    <scroll-view :scroll-top="scrollTop" scroll-y="true" :style="{ height: isRescue ? '50vh' : '370rpx;' }">
      <view class="item_box">
        <view :key="item.id" class="item" @click="clickItem(item, i)" v-for="(item, i) in allMarkers"
          :class="{ redBorder: i === redBorder }">
          <view class="item_left">
            <view class="item_com">
              <view class="item_com_name">{{ item.title }}</view>
              <view class="item_com_K" v-if="!isNaN(item.distance)">距离您 <text class="num">{{ item.distance }}</text> 公里
              </view>
            </view>
            <template v-if="isRescue">
              <view class="phone_row">售后电话：
                <text class="phone">{{ item.hotline }}</text>
              </view>
              <view class="phone_row">救援电话：
                <text class="phone">{{ item.rescueTelephone }}</text>
              </view>
            </template>
            <view class="phone_row" v-else>销售电话：
              <text class="phone">{{ item.sale_hotline }}</text>
            </view>
          </view>
          <view class="item_right">
            <view>
              <uni-icons size="60rpx" color="#de4141" type="paperplane-filled"></uni-icons>
            </view>
            <view @click.stop="selectItem(item)">
              <uni-icons size="60rpx" color="#de4141" custom-prefix="iconfont2" type="icon-dianhuatianchong"></uni-icons>
            </view>
          </view>
        </view>
      </view>
      <view style="height: 10rpx"></view>
    </scroll-view>
    <!-- 浮动 -->

    <view class="Contact" :style="{ 'bottom': isRescue ? '760rpx' : '400rpx' }" @click="goShop">
      <image mode="scaleToFill" src="https://www.kamlung.net/images/other/ev_car.png" />
    </view>
    <!-- 弹出层 -->
    <u-popup :show="popupShow" @close="popupShow = false">
      <!-- 电话 -->
      <view class="photo_box">
        <view class="photo_box__title">联系我们</view>
        <view class="box">
          <template v-if="isRescue">
            <view class="photo_no" v-if="teleModal.afterSalesTele !== ''" @click="phoneCall(teleModal.afterSalesTele)">
              售后电话:
              <text class="text">{{ teleModal.afterSalesTele }}</text>
            </view>
            <view class="photo_no" v-if="teleModal.rescueTele !== ''" @click="phoneCall(teleModal.rescueTele)">
              救援电话:
              <text class="text">{{ teleModal.rescueTele }}</text>
            </view>
          </template>
          <view class="photo_no" v-if="!isRescue && teleModal.rescueTele !== ''"
            @click="phoneCall(teleModal.sale_hotline)">
            销售电话：:
            <text class="text">{{ teleModal.sale_hotline }}</text>
          </view>
        </view>
        <view class="cancel" @click.stop="popupShow = false">取 消</view>
      </view>
    </u-popup>
  </view>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
import { location } from '@/mixins/location'
export default {
  mixins: [location],
  data() {
    return {
      scrollTop: 0,
      flag: true,
      scale: 7.8,
      currShop: {},
      // 第一家公司
      showMark: false,
      redBorder: -1,
      teleModal: {
        rescueTele: '',
        afterSalesTele: '',
      },
      baseUrl: this.$baseUrl,
      popupShow: false,
      id: 0, // 使用 marker点击事件 需要填写id
      title: 'map',
      // 中间位置
      latitude: 22.820299,
      longitude: 113.43328,
      mapCtx: null,
      markers: [],
      isRescue: true
    }
  },
  onLoad(e) {
    let flag = e?.rescue === 'rescue'
    this.isRescue = flag
    wx.setNavigationBarTitle({ title: `${flag ? '救援服务' : '导航到店'}`, })
    this.shareMixin.title = `救援服务`
    this.shareMixin.path = `/pages/RescueServices`
    if (flag) {
      this.shareMixin.query = 'rescue=rescue'
    }
    // 获取定位
    if (!Object.keys(this.latLog).length) {
      this.getLocation()
    }
    console.log('markers', this.markers)
  },
  onReady() {
    this.mapCtx = uni.createMapContext("myMap", this)
  },
  methods: {
    ...mapMutations(['saveCenters', 'saveLatLog']),
    // 打电话
    phoneCall(e) {
      uni.makePhoneCall({
        phoneNumber: `${e}`,
      })
    },
    selectItem(e) {
      this.teleModal.afterSalesTele = e.hotline
      this.teleModal.rescueTele = e.rescueTelephone
      this.teleModal.sale_hotline = e.sale_hotline
      this.popupShow = true
    },
    clickItem(item, index) {
      this.showDialog = false
      let { id, latitude, longitude } = item
      this.latitude = latitude
      this.longitude = longitude
      this.currShop = item
      // this.redBorder = index
      this.markertap({ markerId: id })
      this.scale = 7.8
      // this.setScale(14)
    },
    setScale(scale = 10) {
      // console.log('缩放 :>> ');
      this.mapCtx.getScale({
        success: res => {
          console.log("缩放", res)
          this.scale = res.scale;
          this.$nextTick(() => {
            this.scale = scale
          })
        }
      })
    },
    markertap(e) {
      this.flag = false;
      let markers = this.markers
      let id = e.markerId
      let index = markers.findIndex(v => v.id == id)
      let { title, address, latitude, longitude } = markers[index]
      this.redBorder = index
      this.currShop = { title, address, latitude, longitude }
      console.log('title :>> ', title);
      this.latitude = latitude
      this.longitude = longitude
      markers.forEach(v => {
        if (v.id == id) {
          v.customCallout.display = 'ALWAYS' // 点击marker 显示站点名
        } else {
          v.customCallout.display = 'NONE'
        }
      })
      setTimeout(() => {
        this.flag = true;
      }, 400)
      this.mapCtx.setCenterOffset({
        offset: [0.5, 0.7]
      })
      this.scrollTop = 170 * index + 'rpx'
      // this.scrollTop = 210 * index + 'rpx'
    },
    // 点击地图
    clickMap() {
      if (!this.flag) return
      setTimeout(() => {
        if (!this.flag) return
        console.log('点击地图 :>> ',);
        this.redBorder = -1
        this.markers.forEach(v => v.customCallout.display = 'NONE')
        this.mapCtx.setCenterOffset({
          offset: [0.5, 0.5]
        })
        this.latitude = 22.820299
        this.longitude = 113.43328
        this.scrollTop = 0
        this.scale = this.scale === 7.8 ? 7.7 : 7.8
      }, 200);
    },
    regionchange() {
      console.log('99 :>> ', 99);
      // this.showDialog = !this.showDialog
    },
    anchorpointtap(e) {
      console.log('anchorpointtap :>> ', e);
    },
    // 点击气泡
    callouttap(e) {
      let { title, address, latitude, longitude } = this.currShop
      uni.openLocation({
        latitude,
        longitude,
        name: title,
        address: `地址：${address}`
      })
    },
    // 到店
    goShop() {
      let temp = this.centers.find(item => item.ev_on == 1)
      if (!temp) {
        return uni.$showMsg(`附近没有充电桩！`)
      }
      let { value, address, latitude, longitude } = temp
      uni.openLocation({
        name: value,
        latitude: +latitude,
        longitude: +longitude,
        address: `地址：${address}`
      })
    },
  },
  computed: {
    ...mapState(['latLog', 'centers', 'brandInfo',]),
    // 地图上显示各个公司的标注点
    allMarkers() {
      let base = `${this.baseUrl}/images/company/4s/`
      return this.centers.map(v => ({
        id: v.id,
        latitude: +v.latitude,
        longitude: +v.longitude,
        iconPath: '../../../static/location.png',
        title: v.value,
        address: v.address,
        width: 25,
        height: 25,
        hotline: v.hotline,
        distance: v.distance,
        sale_hotline: v.sale_hotline,
        rescueTelephone: v.rescueTelephone,
        company_img: `${base}${v.company_img}`,
        customCallout: {
          anchorY: -10,
          anchorX: 20,
          // display: 'BYCLICK',
          display: 'NONE',
          // display: 'ALWAYS',
        }
      }))
    }
  },
  watch: {
    allMarkers: {
      handler(newVal) {
        if (!newVal.length) return
        // this.currShop = newVal[0]
        // let { latitude, longitude } = newVal[0]
        // this.latitude = latitude
        // this.longitude = longitude
        console.log('newVal :>> ', newVal);
        this.markers = newVal
      },
      deep: true,
      immediate: true,
    },
  },
}
</script>
<style>
page {
  background-color: #fafafa;
}
</style>
<style scoped lang="scss">
.customCallout {
  width: 400rpx;
  padding: 10rpx 10rpx 0 10rpx;
  background-color: #fff;
}

.box-img {
  height: 120px;
  position: relative;

  .img {
    margin-top: -60px;
    width: 100%;
    // height: 100%;
    height: auto;
    position: absolute;
    top: 50%;
  }
}

// .title {
//   display: block;
//   line-height: 60rpx;
//   color: #222;
//   font-weight: 600;
// }
.content {
  padding-bottom: 10rpx;
}

.to-title {
  margin-top: 8px;
  width: 400rpx;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;

  .p {
    width: 100%;
    line-height: 42rpx;
    color: #222;
    white-space: initial;
  }

  .title {

    font-weight: 600;
  }
}

.to-shop {
  width: 100%;
  padding: 6rpx 0;
  margin: 16rpx 0;
  // padding: 10rpx 0;
  font-weight: 400;
  color: #fff;
  display: flex;
  line-height: 80rpx;
  border-radius: 40rpx;
  font-size: 12px;
  justify-content: center;
  align-items: center;
  background-color: #c70025;

  &__img {
    margin-right: 10rpx;
    width: 35rpx;
    height: 35rpx;

    .img {
      width: 100%;
      height: 100%;
    }
  }
}

.item_box {
  border-top: solid 1px #ddd;
  padding-top: 30rpx;

  .redBorder {
    border: solid 1px $theme-color !important;
  }

  .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: solid 1px #fff;
    flex: 1;
    margin: 0rpx 20rpx 20rpx 20rpx;
    box-shadow: $theme-shadow;
    padding: 30rpx 30rpx;
    font-size: 28rpx;
    background-color: #fff;

    .item_left {
      .item_com {
        display: flex;

        .item_com_name {
          font-size: 30rpx;
          font-weight: 500;
        }

        .item_com_K {
          font-size: 28rpx;
          margin-left: 30rpx;

          .num {
            font-weight: 600;
            color: #19b927;
          }
        }
      }

      .addre {
        width: 560rpx;
      }

      .phone_row {
        line-height: 46rpx;

        .phone {
          color: $theme-color;
        }
      }
    }

    .item_right {
      width: 170rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}

.photo_box {
  background-color: #f6f6f6;

  &__title {
    text-align: center;
    line-height: 86rpx;
    font-size: 30rpx;
    background-color: #fff;
    border-bottom: 1px solid #eee;
  }

  .box {
    background-color: #fff;

    .photo_no {
      text-align: center;
      border-bottom: 1px solid #eee;

      .text {
        display: inline-block;
        padding: 0 10rpx;
        line-height: 108rpx;
        font-size: 28rpx;
        color: $theme-color;
      }
    }
  }

  .cancel {
    margin-top: 8px;
    text-align: center;
    line-height: 118rpx;
    font-size: 30rpx;
    background-color: #fff;
  }
}

.Contact {
  width: 70rpx;
  height: 70rpx;
  position: fixed;
  right: 30px;
  // bottom: 60px;
  border-radius: 50%;
  // background-color: rgba(0, 0, 0, 0.2);
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  // border: #eee 1rpx solid;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

  image {
    width: 90%;
    height: 90%;
  }
}
</style>
